\n",
"Sketch #23 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"// The next line is needed if running in JavaScript Mode with Processing.js\n",
"/* @pjs preload=\"moon.jpg\"; */\n",
"\n",
"float[][] kernel = {{ -1, -1, -1}, \n",
" { -1, 9, -1}, \n",
" { -1, -1, -1}};\n",
" \n",
"PImage img;\n",
"\n",
"void setup() { \n",
" size(640, 360);\n",
" img = loadImage(\"moon.jpg\"); // Load the original image\n",
"}\n",
"\n",
"void draw() {\n",
" image(img, 0, 0); // Displays the image from point (0,0) \n",
" img.loadPixels();\n",
" // Create an opaque image of the same size as the original\n",
" PImage edgeImg = createImage(img.width, img.height, RGB);\n",
" // Loop through every pixel in the image.\n",
" for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges\n",
" for (int x = 1; x < img.width-1; x++) { // Skip left and right edges\n",
" float sum = 0; // Kernel sum for this pixel\n",
" for (int ky = -1; ky <= 1; ky++) {\n",
" for (int kx = -1; kx <= 1; kx++) {\n",
" // Calculate the adjacent pixel for this kernel point\n",
" int pos = (y + ky)*img.width + (x + kx);\n",
" // Image is grayscale, red/green/blue are identical\n",
" float val = red(img.pixels[pos]);\n",
" // Multiply adjacent pixels based on the kernel values\n",
" sum += kernel[ky+1][kx+1] * val;\n",
" }\n",
" }\n",
" // For this pixel in the new image, set the gray value\n",
" // based on the sum from the kernel\n",
" edgeImg.pixels[int(y * img.width + x)] = color(sum, sum, sum);\n",
" }\n",
" }\n",
" // State that there are changes to edgeImg.pixels[]\n",
" edgeImg.updatePixels();\n",
" image(edgeImg, width/2, 0); // Draw the new image\n",
" noLoop();\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**Problem 5**: Try edge detection on one of your own images, but with a purpose. What is the use of edge detection?"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 1.4 Blurring"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"https://processing.org/examples/blur.html\n",
"\n",
"A sample kernel for blurring (low-pass filter):\n",
"\n",
"
\n",
"Sketch #24 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"// The next line is needed if running in JavaScript Mode with Processing.js\n",
"/* @pjs preload=\"moon.jpg\"; */ \n",
"\n",
"float v = 1.0 / 9.0;\n",
"float[][] kernel = {{ v, v, v }, \n",
" { v, v, v }, \n",
" { v, v, v }};\n",
" \n",
"PImage img;\n",
"\n",
"void setup() {\n",
" size(640, 360);\n",
" img = loadImage(\"moon.jpg\"); // Load the original image\n",
"} \n",
"\n",
"void draw() {\n",
" image(img, 0, 0); // Displays the image from point (0,0) \n",
" img.loadPixels();\n",
"\n",
" // Create an opaque image of the same size as the original\n",
" PImage edgeImg = createImage(img.width, img.height, RGB);\n",
"\n",
" // Loop through every pixel in the image\n",
" for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges\n",
" for (int x = 1; x < img.width-1; x++) { // Skip left and right edges\n",
" float sum = 0; // Kernel sum for this pixel\n",
" for (int ky = -1; ky <= 1; ky++) {\n",
" for (int kx = -1; kx <= 1; kx++) {\n",
" // Calculate the adjacent pixel for this kernel point\n",
" int pos = (y + ky)*img.width + (x + kx);\n",
" // Image is grayscale, red/green/blue are identical\n",
" float val = red(img.pixels[pos]);\n",
" // Multiply adjacent pixels based on the kernel values\n",
" sum += kernel[ky+1][kx+1] * val;\n",
" }\n",
" }\n",
" // For this pixel in the new image, set the gray value\n",
" // based on the sum from the kernel\n",
" edgeImg.pixels[int(y * img.width + x)] = color(sum);\n",
" }\n",
" }\n",
" // State that there are changes to edgeImg.pixels[]\n",
" edgeImg.updatePixels();\n",
"\n",
" image(edgeImg, width/2, 0); // Draw the new image\n",
" noLoop();\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**Problem 6**: Perform blurring on one of your own images. Why might this be useful?"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**Bonus**: combine two of the photoshop-like effects in a single image."
]
},
{
"cell_type": "code",
"execution_count": 49,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_32\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_32\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_32\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_32\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"
![](\"http://blog.unem.de/wp-content/uploads/2012/05/11-Greenscreen-Clarissa-Knorr.jpg\")
\n",
"\n",
"![](\"http://images.tenplay.com.au/~/media/News/National%20News/National%20News%20do%20not%20delete/News_National_showheader_480x210.jpg\")
\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Displaying an Image\n",
"\n",
"This example introduces 6 new things related to images:\n",
"\n",
"* Processing Javascript Directives: /* @pjs preload=...; */\n",
"* PImage img;\n",
"* img = loadImage(FILENAME);\n",
"* img.resize(WIDTH, HEIGHT);\n",
"* img.width, img.height\n",
"* image(img, X, Y);\n",
"\n",
"First, we download an image to use:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Downloaded 'greenscreen1.jpg'.\n"
]
}
],
"source": [
"%download http://blog.unem.de/wp-content/uploads/2012/05/11-Greenscreen-Clarissa-Knorr.jpg -f greenscreen1.jpg"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Next, we display it:"
]
},
{
"cell_type": "code",
"execution_count": 35,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_19\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_19\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_19\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_19\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
" "
],
"text/plain": [
"![](\"http://i29.photobucket.com/albums/c290/trebor007/image_3655004.jpg\")
\n",
"\n",
"![](\"http://api.ning.com/files/kV4MbYiv7oQxtg0u3OrWQkfZbxknaslOHLO9D9LHzZ--Ml7zc5AFWoFnntGTBV822fWbkmXBcaQiO2irIfHTwbtnGa5Bl7Rn/1082019727.jpeg\")
"
]
},
{
"cell_type": "code",
"execution_count": 34,
"metadata": {
"collapsed": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Downloaded 'obama.jpg'.\n"
]
}
],
"source": [
"%download http://i29.photobucket.com/albums/c290/trebor007/image_3655004.jpg -f obama.jpg"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**Problem 3**: Take the regular picture of Obama and see if you can produce one programmatically that looks like the artistic version.\n",
"\n",
"**Problem 4**: Take a pictures of yourself, and make it look like an Obamicon-ified version."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 1.3 Edge Detection"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"https://processing.org/examples/edgedetection.html\n",
"\n",
"There are a series of image processing techniques that can be accomplished by comparing a pixel to its surrounding 8 pixels.\n",
"\n",
"A sample kernel for edge detection (high-pass filter):\n",
"\n",
"